<template>
  <div class="container">
    <div class="form">
      <div class="top">
        <div :data-id="1" :class="now==1?'active':''" @click="change"> 登陆</div>
        <div :data-id="2" :class="now==2?'active':''" @click="change"> 注册</div>
      </div>
      <Input :style="style" name="电话">
        <template v-slot:input>
          <input required="" type="text" class="input" v-model="signForm.telephone">
        </template>
      </Input>
      <Input :style="style" name="密码">
        <template v-slot:input>
          <input required="" type="password" class="input" v-model="signForm.pwd">
        </template>
      </Input>

      <div class="btn" v-if="now==1">
        <el-button type="primary" @click="login">登陆</el-button>
      </div>
      <div class="sign" v-if="now==2">
        <Input :style="style" name="姓名">
          <template v-slot:input>
            <input required="" type="text" class="input" v-model="signForm.name">
          </template>
        </Input>
        <Input :style="style" name="学号">
          <template v-slot:input>
            <input required="" type="text" class="input" v-model="signForm.studentid">
          </template>
        </Input>
        <Input :style="style" name="学院">
          <template v-slot:input>
            <input required="" type="text" class="input" v-model="signForm.college">
          </template>
        </Input>
        <div class="select">
          <span>身份</span>
          <select v-model="signForm.authority">
            <option value="学生">学生</option>
            <option value="老师">老师</option>
          </select>
        </div>
        <div class="code">
          <input type="text" placeholder="验证码" v-model="signForm.code">
          <el-button @click="sendCode"> {{ btntext }}</el-button>
        </div>

        <div class="btn">
          <el-button type="success"  @click="sign">注册</el-button>
        </div>
      </div>

    </div>

  </div>
</template>

<script setup>
import {reactive, ref, inject} from "vue";
import {useRouter} from "vue-router";
import Input from "@/components/input"

const style = reactive({
  width: '70%',
  height: "50px",
  margin: '10px auto'
})

const router = useRouter()
const axios = inject("$axios")
const now = ref(1)
const signForm = reactive({
  telephone: "",
  pwd: "",
  college: "",
  studentid: "",
  authority: "",
  code: '',
  name: ""
})
const btntext = ref("发送")
const sendCode = () => {
  var regExp = new RegExp("^1[3578]\\d{9}$");
  if (!regExp.test(signForm.telephone)) {
    ElMessage({
      message: "请输入手机号",
      type: "warning"
    })

  } else axios.get("login/code?telephone=" + signForm.telephone).then(res => {
    if (res.code == 1) {
      ElMessage({
        type: "success",
        message: "发送成功"
      })
    }
  }).catch(err => {
  })
  btntext.value = "已发送"
}

const doSign = () => {
  var flag = true
  for (var key in signForm) {
    if (signForm[key] == '') {
      flag = false
      ElMessage({
        message: "请完整填写信息",
        type: "warning"
      })
      break
    }
  }
  if (flag) axios.post("login/sign", signForm).then(res => {
    if (res.code == 0) {
      ElMessage({
        message: res.msg,
        type: "error"
      })
    } else {

      window.localStorage.setItem("telephone", signForm.telephone)
      window.localStorage.setItem("studentId", signForm.studentid)
      window.localStorage.setItem("college", signForm.college)
      window.localStorage.setItem("authority", signForm.authority)
      window.localStorage.setItem("name", signForm.name)
      router.replace("/index")
    }
  })
}
const sign = () => {
  if (graphCode == '') {
    ElMessage({
      message: "请完整填写图形验证码",
      type: "warning"
    })
  } else {
    axios.get("login/check?code=" + graphCode.value).then(res => {
      if (res.code == 0) {
        ElMessage({
          message: "图形验证码错误",
          type: "error"
        })
        return
      } else doSign()
    })
  }

}
const login = () => {
  if (signForm.pwd == '' || signForm.telephone == '') {
    ElMessage({
      message: "请完整填写信息",
      type: "warning"
    })

  } else {
    axios.post("login", signForm).then(res => {
      if (res.code == 1) {
        var user = res.data
        window.localStorage.setItem("telephone", signForm.telephone)
        window.localStorage.setItem("studentId", user.studentid)
        window.localStorage.setItem("college", user.college)
        window.localStorage.setItem("authority", user.authority)
        window.localStorage.setItem("id", user.id)
        window.localStorage.setItem("name", user.name)
        router.replace("/index")
      } else {
        ElMessage({
          message: "账号或密码错误  ",
          type: "error"
        })
      }

    })

  }
}

const change = (e) => now.value = e.target.dataset.id

</script>

<style scoped lang="less">


      input {
        letter-spacing: 1px;
      }

      .select {
        display: flex;
        justify-content: flex-start;
        width: 70%;
        margin: 10px auto;

        span {
          display: inline-block;
          width: 40px;
          color: #A8ABB2;
          margin: 0 20px;
          text-align: start;
        }
      }

      .top {
        display: flex;
        justify-content: center;

        div {
          margin: 20px;
          color: #606266;
          line-height: 25px;
          font-weight: 700;
        }

        .active {
          color: #409EFF;
          border-bottom: #409EFF 2px solid;
        }

      }

      select {
        border: #409EFF 1px solid;
        height: 25px;
        width: 70%;
        border-radius: 10px;
      }


      .btn {
        width: 100%;
        text-align: center;
        margin-top: 40px;

        button {
          width:70%;
        }
      }

      .code {
        width: 70%;
        margin: 10px auto;
        height: 30px;
        display: flex;
        justify-content: space-between;

        input {
          width: 60%;
          border: 1px solid #409EFF;
          text-indent: 1em;
          border-radius: 15px;
        }


      }

/*移动设备*/
@media screen and (max-width: 480px) {
  /*CSS代码*/
  .container {
    height: 100vh;
    background-color: #409EFF;
    border: 1px transparent solid;
    width: 100%;

    .form {
      background-color: #ffffff;
      width: 70%;
      margin: 10px auto;
      position: relative;
      top: 30px;
      padding: 10px;
      border-radius: 10px;
      padding-bottom: 10px;


    }

  }
}

/*PC*/
@media screen and(min-width: 480px) {
  .container {
    width: 100%;
    height: 100vh;
    background-image: url("@/assets/login.jpg");
    background-size: 100% 100%;
    position: relative;

    .form {
      background-color: #ffffff;
      padding: 10px;
      border-radius: 10px;
      position: absolute;
      right: 10vw;
      top: 4vw;
      padding-bottom: 20px;
      width: 30vw;
      color: #ffffff;

    }
  }
}

</style>